<template>
  <view class="content" style="background-color: aliceblue;">
    <uni-table ref="table" :loading="loading" stripe type="selection" emptyText="暂无更多数据"
      @selection-change="selectionChange">
      <uni-tr>
        <uni-th>
          <view class="top" style="display: flex;justify-content: space-between;color: red;">
            <text class="p-5">全部 {{total}}</text>
            <text class="p-5" @click="dialogToggle('info')">删除</text>
            <!-- @click="del" -->
          </view>
        </uni-th>
      </uni-tr>
      <uni-tr v-if="cartData" v-for="(item,i) in cartData" :key="i">
        <view class="g-card">
          <view class="g-img">
            <image :src="item.goodsImg" style="width: 200rpx;height: 200rpx;"></image>
          </view>
          <view class="g-text">
            <text class="mr-10">{{item.goodsName}}</text>
            <view style="display: flex;justify-content: space-between;">
              <text class="mr-10" style="color: orangered;">￥{{item.price}}</text>
              <view>
                <text class="mr-10" style="font-size: 15px;margin-right: 5rpx;">X </text>
                <text class="mr-10" style="font-size: 25px;color: orangered;">{{item.num}}</text>
              </view>
            </view>
          </view>
        </view>
      </uni-tr>
    </uni-table>
    <text class="goods-carts" style="color: orangered;font-size: 20px;">￥：{{sumPrice}}</text>
    <view class="goods-carts">
      <button style="color: white;background-color: #3c9cff;border-radius: 10px;" @click="settle">立即支付</button>
    </view>

    <view>
      <!-- 提示窗示例 -->
      <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="删除提示" content="是否删除数据!"
          @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        total: 0,
        cartData: [],
        pageNum: 1,
        pageSize: 5,
        name: '',
        goodsId: [],
        sumPrice: 0,
        formData: []
      }
    },
    onShow() {
      this.load()
    },
    onReachBottom() {
      this.pageSize++

    },
    onLoad() {
      this.load()
    },
    onPullDownRefresh() {
      this.load()
      setTimeout(function() {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    methods: {
      dialogToggle(type) {
        if (this.formData.length == 0) {
          uni.showToast({
            icon: "error",
            title: "请选择数据"
          })
          return false
        }
        this.msgType = type
        this.$refs.alertDialog.open()
      },
      dialogConfirm() {
        this.del()
      },
      dialogClose() {
        console.log('点击关闭')
      },
      load() {
        this.request({
          url: '/carts/page',
          method: 'GET',
          data: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.name
          }
        }).then(res => {
          this.cartData = res.data.records
          this.total = res.data.total
        })
      },
      //选择
      selectionChange(e) {
        this.formData = []
        this.sumPrice = 0
        // 多选
        console.log(e.detail.index)
        var selectedIndexs = e.detail.index
        for (var i = 0; i < selectedIndexs.length; i++) {
          console.log(selectedIndexs[i]);
          this.formData.push(this.cartData[selectedIndexs[i]])
          this.sumPrice += this.cartData[selectedIndexs[i]].price * this.cartData[selectedIndexs[i]].num
        }
        this.sumPrice = this.sumPrice.toFixed(2)
      },
      del() {
        let ids = this.formData.map(v => v.id)
        if (ids.length == 0) {
          uni.showToast({
            icon: "error",
            title: "请选择数据"
          })
          return false
        }
        this.request({
          url: '/carts/batch/',
          method: 'POST',
          data: ids
        }).then(res => {
          if (res.code === 200) {
            uni.showToast({
              icon: "none",
              title: "删除成功"
            })
            this.selectionChange()
          } else {
            uni.showToast({
              icon: "error",
              title: res.message
            })
          }
        })
      },
      //结算
      settle() {
        if (this.formData.length == 0) {
          uni.showToast({
            icon: "error",
            title: "请选择数据"
          })
          return false
        }
        let data = {
          name: this.formData[0].goodsName,
          sumPrice: this.sumPrice,
          carts: this.formData
        }
        this.request({
          url: '/orders',
          method: 'POST',
          data: data
        }).then(res => {
          if (res.code === 200) {
            uni.showToast({
              icon: "success",
              title: "结算成功"
            })
            uni.navigateTo({
              url: '/pages/my/order/order'
            })
          } else {
            uni.showToast({
              icon: "none",
              title: res.message
            })
          }
        })
        this.load()
        this.formData = []
      },
    }
  }
</script>

<style lang="scss">
  .p-5 {
    padding: 15rpx;
  }

  .g-card {
    display: flex;
    padding: 50rpx;
    background-color: white;
    border-radius: 15rpx;
  }

  .g-img {
    flex: 1;
    display: flex;
  }

  .g-text {
    justify-content: space-between;
    flex-direction: column;
    display: flex;
    margin: 20rpx;
    flex: 2;
  }

  .example-body {
    padding: 0;
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
  }

  .goods-carts {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    /* #ifdef H5 */
    left: var(--window-left);
    right: var(--window-right);
    /* #endif */
    bottom: 10px;
  }
</style>
